<template>
	<view class="Suborder">
		<view class="top0">
			<view style="text-align: center;margin-top: 68rpx;font-family:cursive;font-size: 21px;">鸿蒙记账</view>
			<view style="display: flex;align-items: center;justify-content: space-around;margin-top: 20rpx;">
				<view>
					<view
						style="color: #353535;font-size: 15px;font-weight: 200;margin-bottom: 10rpx;margin-top: 20rpx">
						{{ year }}年
					</view>
					<view style="display: flex;align-items: center;" @click="show = true">
						<view style="font-weight: 500;">
							<picker mode="date" :value="param.date" :start="startDate" :end="endDate"
								@change="bindDateChange">
								<view class="">{{ month }}月</view>
							</picker>
						</view>
						<u-icon name="arrow-down-fill" @click="show=true" ></u-icon>
					</view>
				</view>
				<view style="margin-top: 20rpx;display: grid;align-items: center;margin-left: -20rpx;"
					@click="paixu(1)">
					<view style="color:#353535;font-size: 14px;font-weight: 200;margin-bottom: 10rpx;">收入</view>
					<u--text :text="mountVo===null||mountVo===''?'0.00':mountVo.num" color="#000000" size="20">
					</u--text>
				</view>
				<view style="margin-top: 20rpx;" @click="paixu(2)">
					<view style="font-size: 14px;color:#353535;font-weight: 200;margin-bottom: 10rpx;">支出</view>
					<u--text :text="mountVo===null||mountVo===''?'0.00':mountVo.jian" color="#000000" size="20">
					</u--text>
				</view>
			</view>
			<view class="grid">
				<u-grid :border="false" @click="click" col="4">
					<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
						<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="baseListItem.name" :size="22"></u-icon>
						<text class="grid-text">{{baseListItem.title}}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<u-popup :show="popupshow" @close="close" @open="open" mode="top">
			<view style="margin-top:160rpx;" v-if="!yusuanShow">
				<view style="margin-left: 30rpx;margin-right: 30rpx;">
					<u-line-progress :percentage="(mountVo.jian/Number(yuPrice))*100" activeColor="#ff0000">
					</u-line-progress>
				</view>
				<u-cell-group>
					<u-cell icon="integral-fill" title="剩余预算" :value="(Number(yuPrice)+mountVo.num-mountVo.jian)">
					</u-cell>
					<u-cell icon="integral-fill" title="本月预算" :value="yuPrice"></u-cell>
					<u-cell icon="integral-fill" title="本月支出" :value="mountVo.jian"></u-cell>
					<u-cell icon="integral-fill" title="本月收入" :value="mountVo.num"></u-cell>
				</u-cell-group>
				<u-button type="primary" text="重置预算" @click="resetYuPrice()"></u-button>
			</view>
			<view style="margin-top:190rpx;" v-if="yusuanShow">
				<u--input placeholder="请输入预算" border="bottom" v-model="yuPrice" clearable type="number"></u--input>
				<view style="height: 35rpx;"></view>
				<u-button type="primary" text="确定" @click="serPrice()"></u-button>
			</view>
		</u-popup>

		<u-picker :show="reOrUpshow" :columns="columns" @cancel="reOrUpshow=false" @confirm="reOrUpConfirm()">
		</u-picker>

       
	 	<view class="conn" >
			<u-empty mode="search" icon="http://cdn.uviewui.com/uview/empty/search.png" v-if="total===0||total===''">
			</u-empty>
			<view v-for="item in list" :key="item.date" v-if="total!==0">
				<view class="title">
					<view>{{item.date}}</view>
					<view>支出：{{item.jian}}</view>
					<view>收入：{{item.num}}</view>
				</view>
				<view class="content" v-for="it in item.accountList" :key="it.id" @longpress="reOrUp(it)">
					<view class="a">
						<view style="display: flex;justify-self: flex-start;align-items: center;">
							<u-icon :name="it.icon" color="#ffc940" size="28"></u-icon>
							<view style="margin-left: 13rpx;">{{it.fun}}</view>
						</view>
						<view>{{it.type===1?"+"+it.price:"-"+it.price}}</view>
					</view>
					<u-line length="85%" margin="0px 50px"></u-line>
				</view>
				<u-line></u-line>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				columns: [
					['删除', '修改']
				],
				reOrUpshow: false,
				yusuanShow: true,
				popupshow: false,
				baseList: [{
						name: 'edit-pen',
						title: '记账'
					},
					{
						name: 'red-packet',
						title: '账单'
					},
					{
						name: 'hourglass-half-fill',
						title: '预算'
					},
					{
						name: 'man-delete',
						title: '家人账单'
					},
				],
				show: false,
				mountVo: {},
				list: [],
				total: '',
				yearMonth: Number(new Date()),
				param: {
					pageSize: 7,
					pageNum: 1,
					userId: uni.getStorageSync("user").id,
					date: currentDate
				},
				user: uni.getStorageSync("user"),
				timer: null,
				yuPrice: 0,
				item: {}
			};
		},
		onLoad() {
			uni.showLoading({
				title: '加载中'
			});
			if (this.timer) {
				clearTimeout(this.timer); // 清除定时器  
			}
			this.getList()
		},
		onPullDownRefresh() {
			this.param.pageNum = 1
			uni.showLoading({
				title: '加载中'
			});
			this.getList()
			this.timer = setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 300)
		},
		onReachBottom() {
			this.getBottom()
		},
		computed: {
			year() {
				const date = new Date(this.param.date);
				return date.getFullYear();
			},
			month() {
				const date = new Date(this.param.date);
				return date.getMonth() + 1; // getMonth() 返回的月份是从0开始的，所以需要+1  
			},
		},
		methods: {
			async reOrUpConfirm(e) {
				if (e.value[0] === "删除") {
					const res = await this.$myRuquest({
						url: '/wexinLogin/account/accountDelete?id=' + this.item.id,
						method: 'post',
					})
					if (res.data.data === true) {
						uni.switchTab({
							url: '/pages/account/account'
						})
						uni.showToast({
							title: "操作成功",
							icon: "none"
						})
					} else {
						uni.showToast({
							title: "操作失败，联系管理员",
							icon: "none"
						})
					}
				} else {
					uni.navigateTo({
						url: '/pagesa/accountAdd/accountAdd?type=' + this.item.type + "&price=" + this.item
							.price +
							"&createTime=" + this.item.createTime +
							"&fun=" + this.item.fun + "&tabId=" + this.item.tabId + "&id=" + this.item.id
					})
				}
				this.reOrUpshow = false
			},
			reOrUp(item) {
				this.item = item
				this.reOrUpshow = true
			},
			serPrice() {
				if (this.yuPrice === 0) {
					return uni.showToast({
						title: "请填写预算",
						icon: "none"
					})
				}
				uni.setStorageSync("yuprice", this.yuPrice)
				this.yusuanShow = false
			},
			resetYuPrice() {
				this.yuPrice = 0
				uni.removeStorageSync("yuprice")
				this.yusuanShow = true
			},
			open() {
				// console.log('open');
			},
			close() {
				this.popupshow = false
				// console.log('close');
			},
			paixu(item) {
				if (item === 1) {
					uni.navigateTo({
						url: "/pagesa/accountPaixu/accountPaixu?year=" + this.year + "&mount=" + this.month +
							"&total=" + this.mountVo.num + "&type=" + 1
					})
				} else {
					uni.navigateTo({
						url: "/pagesa/accountPaixu/accountPaixu?year=" + this.year + "&mount=" + this.month +
							"&total=" + this.mountVo.jian + "&type=" + 0
					})
				}
			},
			confirm() {
				console.log(this.yearMonth)
			},
			click(name) {
				if (name === 0) {
					uni.navigateTo({
						url: "/pagesa/accountAdd/accountAdd"
					})
				} else if (name === 1) {
					uni.navigateTo({
						url: "/pagesa/accountYear/accountYear?year=" + this.year
					})
				} else if (name === 2) {
					this.popupshow = true
					const price = uni.getStorageSync("yuprice")
					if (price === null || price === '') {
						this.yusuanShow = true
					} else {
						this.yusuanShow = false
						this.yuPrice = price
					}
				} else {
					if (this.user.frentLink === 2|| this.user.frentLink === 3 || this.user.frentLink === 32|| this.user.frentLink === 5) {
						return uni.showToast({
							title: '联系管理员开通会员权限',
							icon: "none"
						})
					}
					const user=uni.getStorageSync("user")
					if (user.famId === null || user.famId === '') {
						uni.navigateTo({
							url: '/pagesa/accountInvater/accountInvater'
						})
					} else {
						uni.navigateTo({
							url: '/pagesa/famAccount/famAccount'
						})
					}


				}
			},
			async getList() {
				const res = await this.$myRuquest({
					url: '/wexinLogin/account',
					method: 'post',
					data: this.param
				})
				this.total = res.data.data.totalIPage.total
				this.list = res.data.data.totalIPage.records
				this.mountVo = res.data.data.mouthVo
				uni.hideLoading();
			},
			async getBottom() {
				console.log("触底了")
				const that = this
				if (this.list.length < this.total) {
					this.param.pageNum++
					uni.showLoading({
						title: '加载中'
					});
					uni.hideLoading();
					uni.request({
						url: that.$baseurl + "/wexinLogin/account",
						method: 'POST',
						data: that.param,
						success(res) {
							that.list = [...that.list, ...res.data.data.totalIPage.records]
						}
					})
				}
			},
			// onDateChange: function(e) {
			// 	this.param.date = e.detail.value;
			// 	this.getList()
			// },

			bindDateChange: function(e) {
				this.param.date = e.target.value
				this.getList()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindPickerChange: function(e) {
				this.accounts.index = e.detail.value
			},
		}
	};
</script>



<style lang="scss" scoped>
	.Suborder {
		width: 100%;

		.top0 {
			background: linear-gradient(to bottom, #fad037, #ffee8e);
			// background-color: #edf00d;
			// background-image: url('https://img95.699pic.com/photo/50047/1028.jpg_wh300.jpg');
			font-size: 19px;
			font-weight: 550;
			height: 360rpx;
			width: 100%;
			position: fixed;
			top: 0;
			z-index: 100;


			.grid {
				background-color: #fff;
				margin-left: 15rpx;
				margin-right: 15rpx;
				border-radius: 10rpx;
				box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
				margin-top: 28rpx;

				.grid-text {
					font-size: 14px;
					color: #909399;
					padding: 10rpx 0 20rpx 0rpx;
					/* #ifndef APP-PLUS */
					box-sizing: border-box;
					/* #endif */
				}
			}
		}

		.conn {
			z-index: 99;
			position: relative;
			margin-top: 440rpx;
			margin-left: 25rpx;
			margin-right: 25rpx;
			height: auto;
			// overflow: hidden;
			overflow: auto;
			-ms-overflow-style: none;
			overflow: -moz-scrollbars-none;

			.title {
				margin-top: 15rpx;
				display: flex;
				justify-content: space-between;
				font-size: 14px;
				font-weight: 220;

			}

			.content {
				height: 120rpx;
				line-height: 120rpx;

				.a {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}

	}
</style>
